import styles from "./index.module.scss";
import { useDispatch, useSelector } from "react-redux";
import EchartsEL from "./echartsEL";

export default function Resource() {
  const dispatch = useDispatch();
  const layers = useSelector((state) => {
    return state.layers;
  });
  const xAxisData = ["四川", "重庆", "上海", "杭州", "北京"];
  const seriesData = [10, 52, 200, 334, 390];
  const colorArr = [
    ["rgba(0, 147, 221, 1)", "rgba(255, 255, 255, 1)"],
    ["rgba(0, 147, 221, 1)", "rgba(0, 88, 255, 0.60)"],
    ["rgba(0, 147, 221, 1)", "rgba(0, 88, 255, 0.40)"],
    ["rgba(10, 49, 108, 0.60)", "rgba(27, 101, 155, 0.60)"],
  ];
  const theme = useSelector((state) => {
    return state.theme;
  });

  return (
    <div className={styles.areaBox}>
      <div className={styles.areaBoxRight}>
        <EchartsEL
          xAxisData={xAxisData}
          colorArr={colorArr}
          seriesData={seriesData}
          textColor={!theme ? "#fff" : "rgba(37, 76, 112, 1)"}
        ></EchartsEL>
      </div>
    </div>
  );
}
